<template>
	<view class="audit-details">
		<view v-for="(taskInfo, inx ) in taskList" :key="inx">
			<view class="title">
				{{taskInfo.task_type==1?'任务审核':taskInfo.task_type==2?'劳动审核':taskInfo.task_type==3?'职业体验':taskInfo.task_type==4?'重要他人':'乐学园'}}
			</view>
			<view class="task-box" v-if="taskInfo.task">
				<!-- 日常劳动 -->
				<view class="task-title" v-if="taskInfo.task_type!=5">
					<view class="title-text" v-if="taskInfo.task">{{taskInfo.task_type==1?taskInfo.task.task_content:taskInfo.task_type==2?taskInfo.task.title:taskInfo.task.task_alignment}}</view>
					<text class="state" :class="[{state2: taskInfo.task.state==2}]">{{taskInfo.task.state==2?'已完成':'待审核'}}</text>
				</view>
				<view class="textarea-box1" v-if="taskInfo.task">
					<view class="task-completion">
						<text-editor :id-name="`editorList${inx}`" :read-only="true" 
							:info="{content: taskInfo.task.content, height: 'auto'}"></text-editor>
						<view class="all-img-file">
						<view class="imgs">
							<image class="img" @click="previewImage(taskInfo.task.dst_imgs, i, taskInfo.task)" v-for="(path, i) in taskInfo.task.dst_imgs" :key="i" :src="path" mode="aspectFill"></image>
						</view>
						<view class="files" v-for="(file, i) in taskInfo.task.files_show" :key="i">
							<zy-file :src="file.path" :name="file.name" :size="file.size"></zy-file>
						</view>
					</view>
					</view>
				</view>
				<view class="key-result" v-if="taskInfo.task.keyResultList">
					<view class="kr-list" v-for="(res, index) in taskInfo.task.keyResultList" :key="index">
						<text-editor :id-name="`editorKeyList${index}`" :read-only="true" 
							:info="{content: res.content, height: 'auto'}"></text-editor>
						<view class="all-img-file" v-if="res.files.length>5">
							<view class="imgs">
								<image class="img" v-for="(path, i) in res.dst_imgs" :key="i" :src="path" mode="aspectFill" @click="previewImage(res.dst_imgs, i, res)"></image>
							</view>
							<view class="files" v-for="(file, i) in res.files_show" :key="i">
								<zy-file :src="file.path" :name="file.name" :size="file.size"></zy-file>
							</view>
						</view>
					</view>
				</view>
				<view class="time-publish" v-if="taskInfo.task">
					<text>发布时间：{{handleTime(taskInfo.task.add_time)}}</text>
				</view>
				<view class="eva-content">
					<view class="tea-info" v-if="taskInfo.task.state==1">
						<text>请评价</text>
					</view>	
					<view class="eva-score">
						<image :src="`/static/score${i<=taskInfo.task.score_teacher?1:''}.png`" v-for="i in 3" :key="i" @click="setScore(taskInfo.task, i)" mode="aspectFill" ></image>
						<text v-if="taskInfo.task.score_teacher>0"  style="margin-left: 16rpx;">{{taskInfo.task.score_teacher}}星</text>
					</view>
					<view class="eva-text" v-if="taskInfo.task.state==2">
						{{taskInfo.task.evaluate_content}}
					</view>
					<view class="eva-textarea" v-else>
						<textarea :value="taskInfo.task.evaluate_content" name="" id="" @input="e=>evaContentInput(e, taskInfo.task)" placeholder="示例：这三个关键词很中肯，已经是目前人数投票最多的关键词了，再接再厉" placeholder-style="color: #999;" maxlength="500"></textarea>
					</view>
				</view>
				<view class="confirm-recommend" v-if="taskInfo.task.state==1">
					<text class="con-btn" style="width: 100%;" @click="postexamineTask(taskInfo.task, taskInfo.task_type, taskInfo.id)">确定</text>
				</view>
			</view>
		</view>
		<view v-if="taskList.length==0" class="no-list">暂无待审核的任务</view>
		
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.bg" :show="recommendPopup">
		</uni-transition>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.fade"
			:show="recommendPopup">
			<view class="tj-tips popup-top">
				<view class="tj-title">
					是否将此项记录纳入活动轨迹？
				</view>
				<view class="tj-bottom">
					<text @click="recommendPopup=false">否</text>
					<text class="confirm-btn" @click="recommendPopup=false">是</text>
				</view>
			</view>
		</uni-transition>
	</view>
</template>
<script>
import textEditor from '../student/components/text-editor.vue'
export default {
	components: {
		textEditor
	},
	data() {
		return {
			options: {}, // 页面参数
			taskList:[], // 待审核的任务列表
			recommendPopup: false, // 推荐弹窗
			currentPage: 1, // 当前页
			loadMore: 'more', // more获取更多数据 loading加载中 no-more 暂无更多数据 
		}
	},
	onLoad(options) {
		this.options = options
		uni.setNavigationBarTitle({
			title: options.name
		})
		
        this.initData()
	},
	onReachBottom(){
		if(this.loadMore == 'more'){
			this.currentPage ++
			this.getTaskDetail()
		}
        
	},
    methods: {
		// 初始化数据
        initData(){
            this.currentPage = 1
			this.taskList = []
			this.getTaskDetail()
        },
		handleTime(time){
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
        getTaskDetail(){
			this.loadMore = 'loading'
			this.api.get('examine/findTaskDetailPage', {
				state: this.options.state,
				accountId: this.options.accountId,
				page: this.currentPage,
				limit: 10
			}).then(res=>{
				if(res.data.state == 'ok') {
					this.loadMore = 'more'
					let taskLogPage = res.data.taskLogPage;
					this.taskList = this.taskList.concat(taskLogPage.list)
					
					for(let i=0; i<taskLogPage.list.length; i++){
						// taskData 任务数据
						let taskData = taskLogPage.list[i].task
						// 如果存在文件，处理文件显示路径
						if(JSON.parse(taskData.files).length>0 && !taskData.dst_files && !taskData.dst_imgs){
							this.handleFilesShow(taskData.files, i, taskData)
						}
						// keyRes 职业劳动的关键结果
						let keyRes = taskData.keyResultList
						if(keyRes){
							for(let j=0; j<keyRes.length; j++){
								let res = keyRes[j]
		
								if(res.files.length>5 && !res.dst_files && !res.dst_imgs){
									this.handleFilesShow(res.files, i, res)
								}
								
							}
						}
					}

					if(taskLogPage.totalPage <= this.currentPage){
						this.loadMore = 'no-more'
					}
				}
			})
		},
		evaContentInput(e, item){
			this.$set(item, 'evaluate_content', e.detail.value)
		},
		postexamineTask(task, type, id){
			// taskType 1.任务 2.日常劳动 3.职业体验 4.重要他人 5.乐学园

			task.accountTaskId = id
			if(!task.score_teacher){
				this.utils.showToast('评价分数需大于0')
				return
			}
			if(!task.evaluate_content){
				this.utils.showToast('评价内容不能为空')
				return
			}
			let cancelFun = ()=>{
				this.setexamineTask(task, type, false)
			}
			if(task.score_teacher==3){
				task.task_type = type
				task.confirmText = '是'
				task.cancelText = '否'
				this.utils.showModal('', '是否将此项记录分享到教师推荐并纳入活动轨迹？', this.creatTeacherRecommend, task, cancelFun)
			}else{
				cancelFun()
			}
			
		},
		setexamineTask(task, type, isAdd){
			let path = ''
			if(type==1){
				path = 'ordinary/examine'
			}else if(type == 2){
				path = 'labour/examineLabour'
			}else if(type == 3){
				path = 'labour/examineVocation'
			}else if(type == 4){
				path = 'example/examine'
			}
			this.api.post(path, {
				taskId: task.id,
				score: task.score_teacher,
				content: task.evaluate_content,
				addTrajectory: isAdd
			}).then(res=>{
				if(res.data.state != 'ok') return
				let deleteTaskIds = uni.getStorageSync('deleteTaskIds') || [];
				deleteTaskIds.push(task.accountTaskId)
				uni.setStorageSync('deleteTaskIds', deleteTaskIds)
				this.utils.showToast('审核成功')
				
				setTimeout(()=>{
					this.initData()
				}, 2000)
			})
		},
		creatTeacherRecommend(info){
			// console.log(info, 324)
			// return
			this.api.post('share/creatCampusTeacherRecommend', {
				title: info.title || '',
				taskId: info.id,
				content: info.content,
				files: info.files,
				userAccountId: info.user_account_id,
				taskType: info.task_type
			}).then(res=>{
				if(res.data.state != 'ok') return
			})
			this.setexamineTask(info, info.task_type, true)
		},
		setScore(item, i){
			if(item.state==2) return;
			this.$set(item, 'score_teacher', i)
		},
		// 获取下载链接
		handleFilesShow(list, index, item){
			this.utils.xiaodeShowFiles(list, index, this.taskList, this, item)
		},

		previewImage(list, i){

			uni.previewImage({
				current: i,
				urls: list,
				longPressActions: {
					itemList: [],
					success: function(data) {
						
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
    }
}
</script>
<style lang="less">
	.audit-details{
		
	}
	.task-box{
		padding: 40rpx 32rpx;
	}
	.title{
		height: 104rpx;
		line-height: 104rpx;
		font-size: 34rpx;
		padding-left: 32rpx;
		font-weight: 600;
		background-color: #F9F9F9;
	}
	.textarea-box1{
		border-radius: 20rpx;
		border: 1rpx solid #EEEEEE;
		padding: 32rpx;
		.content{
			p{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}
		}
	}
	.key-result{
		
	}
	.kr-list{
		padding: 40rpx 0;

		&:last-child{
			&::after{
				border: none;
			}
		}
	}
	.k-text{
		display: flex;
		justify-content: space-between;
		align-items: center;
		textarea{
			width: 90%;
			height: 42rpx;
			font-size: 28rpx;
			margin-bottom: 0;
		}
	}
	.all-img-file{
		margin-top: 32rpx;
		font-size: 0;
		.img{
			width: 194rpx;
			height: 194rpx;
			margin-right: 19rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
		.files{
			margin-top: 12rpx;
		}
	}
	.time-publish{
		margin-top: 24rpx;
		color: #999;
		font-size: 24rpx;
	}
	
	// 评价
	.eva-content{
		margin-top: 64rpx;
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			top: -32rpx;
			content: '';
			width: 200%;
			border-width: 2rpx;
			border-style: dashed;
			border-color: #000;
			transform: scale(0.5) translateX(-50%);
            opacity: .1;
		}
	}
	.tea-info{
		display: flex;
		align-items: center;
		color: #333333;
		image{
			width: 5rpx;
			height: 78rpx;
			border-radius: 156rpx;
			margin-right: 24rpx;
		}
	}
	.eva-score{
		margin: 24rpx 0;
		display: flex;
		align-items: center;
		color: #999999;
		image{
			margin-right: 25rpx;
			width: 48rpx;
			height: 51rpx;
		}
	}
	.eva-text{
		color: #666666;
		font-size: 28rpx;
		line-height: 44rpx;
	}
	.eva-textarea{
		background-color: #F4F4F4;
		border-radius: 20rpx;
		padding: 32rpx;
		textarea{
			width: 100%;
			font-size: 28rpx;
			height: 220rpx;
		}
	}
	.confirm-recommend{
		margin-top: 32rpx;
		text{
			display: inline-block;
			width: 333rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			text-align: center;
			font-weight: 600;
		}
		.re-btn{
			border: 2rpx solid #BFBFBF;
		}
		.con-btn{
			background-color: #28C2CD;
			color: #fff;
		}
	}
	.task-title{
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		.title-text{
			width: 82%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
	.state{
		position: relative;
		padding-left: 20rpx;
		color: #FF4F01;
		font-size: 24rpx;
		line-height: 32rpx;
		&::after{
			position: absolute;
			content: '';
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			top: 12rpx;
			left: 0%;
			// transform: translateY(-5rpx);
			background-color: #FF4F01;
		}
	}
	.state2{
		color: #999999;
		&::after{
			background-color: #999;
		}
	}
	// 弹窗
	.tj-tips{
		width: 540rpx;
		height: 230rpx;
		border-radius: 20rpx;
		background-color: #fff;
		
		text{
			display: inline-block;
			width: 50%;
			line-height: 88rpx;
			text-align: center;
			box-sizing: border-box;
		}
		.confirm-btn{
			border-left: 1rpx solid #F0F0F0;
			color: #28C2CD;
		}
	}
	.tj-title{
		padding: 50rpx 40rpx 49rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #22242A;
		border-bottom: 1rpx solid #F0F0F0;
	}
	.tj-bottom{
		font-size: 32rpx;
		color: #999999;
		
	}
	.no-list{
		// height: calc(100vh - 44rpx);
		line-height: calc(100vh - 44rpx);
		text-align: center;
		color: #999;
	}
</style>